<template>
  <div>
    <el-dialog v-model="showExport" title="积分导入" width="460px" :before-close="cancel">
      <div class="uploadExcel" v-if="showExport">
        <div class="tips">点击下载<span @click="download">Excel表格模板</span></div>
        <el-upload
          class="upload"
          ref="uploadRef"
          drag
          :limit="1"
          action=""
          accept=".xlsx,.xls"
          :show-file-list="true"
          :http-request="upload"
        >
          <div class="uploadSlot">
            <p>点击或文件拖拽到这里上传</p>
            <div class="uploadSlot-tip">*仅支持xlsx格式，请将大小控制在20M以内</div>
          </div>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";

const props = defineProps({
  showExport: Boolean,
  userId: String,
  modelId: {
    type: String,
    default: "",
  },
});
const loading = ref(false)
const form = ref({
  file: "",
});

const download = async () => {
  window.location.href = 'https://minio.lianhaikeji.com/marketing/marketing-center/1660274955027/积分导入模板.xlsx'
  // let rs = await integralApi.getIntegraTemplate();
  //   let a = document.createElement("a");
  //     console.log(rs);
  //     // ArrayBuffer 转为 Blob
  //     let blob = new Blob([rs], {
  //       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  //     });
  //     let objectUrl = URL.createObjectURL(blob);
  //     a.setAttribute("href", objectUrl);
  //     a.setAttribute("download", "积分导入模板.xlsx");
  //     a.click();
};
const uploadRef = ref();
const upload = (e: any) => {
  let file = e.file;
  form.value.file = file;
};

const submit = async () => {
  let formdata = new FormData();
  for (const key in form.value) {
    if (Object.hasOwnProperty.call(form.value, key)) {
      const element = form.value[key];
      formdata.append(key, element);
    }
  }
  loading.value = true
  let rs = await integralApi.exportExcel(formdata);
  if (rs.code === 200) {
    ElMessage.success("批量导入成功");
    confirm();
  }
  loading.value = false
};
const confirm = () => {
  emit("confirmExport");
  cancel();
};

const cancel = () => {
  uploadRef.value.clearFiles()
  form.value.file = ''
  emit("cancelExport");
  
};
const emit = defineEmits(["confirmExport", "cancelExport"]);
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding-top: 10px;
}
.tips {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  margin-bottom: 8px;
  padding-left: 5px;
  span {
    color: #6178ff;
    cursor: pointer;
  }
}
.upload {
  width: 100%;
  height: 200px;
  // margin: 0 auto 30px;
  :deep(.el-upload-dragger) {
    width: 100%;
    height: 188px;
    // background: red;
    padding: 2px;
    border: 0;
    border-bottom: 1px solid #dae0ff;
  }
}
.uploadSlot {
  width: 100%;
  height: 87px;
  background: url("./../../../../assets/images/_upload_icon.png") center / 100% no-repeat;
  padding-top: 102px;
  text-align: center;
  p {
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 4px;
  }
  &-tip {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
  }
}
.message-style .el-message-box__content {
  max-height: 450px;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
